// 初始化
$(function () {
    // 输入框获取焦点跳转搜索页
    $(".my_input").on("focus", function () {
        // 跳转页面
        location.href = "search.html";
    })

    // 定义变量
    var pageValue = 0;
    var sizeValue = 10;
    // var host = "http://127.0.0.1:7000"

    // 编写获取数据列表的函数
    function getWordList(page, size) {
        // 执行ajax函数
        $.ajax({
            url: host + "/words",
            type: "GET",
            data: {
                page: page,
                size: size
            },
            success: function (resData) {
                // 后台的数据
                // console.log(resData);
                // 渲染分页
                renderPagination(resData.total, page);
                // 渲染词汇列表
                renderWords(resData.result);
            },
            error: function (err) {
                console.log("请求失败", err)
            }
        })
    }


    // 编写函数渲染分页
    function renderPagination(total, page) {
        // 计算总多少页，每一页size数量 ,  total总数
        var nums = Math.ceil(total / sizeValue);
        var html = "";
        for (var i = 0; i < nums; i++) {
            if (i == page) {
                html += `
                    <li class="page-item active">
                        <span class="page-link" data-index="${i}">${i + 1}</span>
                    </li>
                `
            }
            else {
                html += `<li class="page-item"><span class="page-link" data-index="${i}" >${i + 1}</span></li>`
            }
        }
        // 渲染分页字符串
        $(".my_pagination").html(html);
    }

    // 渲染函数渲染词汇列表
    function renderWords(arr) {
        var str = "";
        for (var i = 0; i < arr.length; i++) {
            str += `
                <div class="col-md-3 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="text-danger">
                                    <span style="font-weight: bold;">${arr[i].word}</span>
                                    <i data-text="${arr[i].word}" class="bi bi-volume-down"></i>
                                </div>
                                 <p>翻译: ${arr[i].translation}</p>
                                <p>音标: ${arr[i].phonetic}</p>
                                <div>
                                   
                                </div>
                                <div>
                                    <span class="text-primary">${arr[i].exampleSentence}</span>
                                    <i data-text="${arr[i].exampleSentence}" class="bi bi-volume-down"></i>
                                </div>
                                <div>
                                    ${arr[i].sentenceTranslation}
                                </div>
                                <div class="mt-2">
                                    <a href="detail.html?word=${arr[i].word}" class="btn btn-sm btn-primary">查看详情</a>
                                </div>
                            </div>
                        </div>
                </div>
            `
        }
        // 循环结束
        $(".my_words").html(str);
    }
    // 初始化 调用getWordList函数
    getWordList(pageValue, sizeValue);


    // 事件委托
    $(".my_words").on("click", ".bi", function () {
        var text = $(this).attr("data-text");
        console.log("值:", text);
        // 调用朗读文本的方法
        speak(text);
    })


    // // 原生 JS
    // var my_pagination = document.querySelector(".my_pagination");
    // // 事件委托
    // my_pagination.onclick = function(event){
    //     var element = event.target;//目录元素 （嵌套在最内层的后代元素）
    //     // console.log(element.tagName)
    //     var tagName = element.tagName.toLowerCase()
    //     if(tagName == "span") {
    //         var num = element.innerText - 0 ;
    //         console.log(num);
    //         // 索引   页码
    //         pageValue = num - 1;
    //         // 调用分页的方法
    //         getWordList(pageValue, sizeValue);  
    //     }
    // }


    // JQ (写更少的代码  做更多事情)
    $(".my_pagination").on("click", "span", function () {
        var num = $(this).text() - 0;
        pageValue = num - 1;
        // 调用分页的方法
        getWordList(pageValue, sizeValue);
    })


    // 实现账号登录
    // 思路：
        // 1： 点击“登录账号”需要获取输入框的值
        // 2： 网络请求
        // 3： 根据后台的结果，在页面做出反馈


    // 点击“登录账号”需要获取输入框的值
    $(".my_login_button").click(function(){
        var acc = $(".my_acc").val();
        var pwd = $(".my_pwd").val();

        console.log({acc,pwd});
        if(acc == "" || pwd == "") return false;//终止代码

        // 执行ajax
        loginFunc(acc,pwd);
    })

    // 编写函数 实现网络请求
    function loginFunc(account2, password2){
        $.ajax({
            url: host+"/login",
            type: "POST",
            data: {
                account:  account2,
                password: password2
            },
            success: function(resData){
                // 后台数据
                // console.log(resData)
                if(resData.msg == "登录成功"){
                    $(".my_button").hide();// 隐藏登录按钮
                    $(".my_logout_button").show();// 显示退出按钮和用户昵称
                    $(".nick_name").text(resData.nickName);
                    $("#exampleModal").modal('hide');// 隐藏模态框组件（遮罩层）

                    // 缓存用户信息（昵称，ID）
                    setCookie("nickName",resData.nickName, 2 * 24);
                }
            },
            error: function(err){
                console.log("请求失败:",err);
            },
        })
    }


    // 每次打开页面 先获取缓存的nickName
    var nickName = getCookie("nickName");
    if(nickName){
        $(".my_button").hide();// 隐藏登录按钮
        $(".my_logout_button").show();// 显示退出按钮和用户昵称
        $(".nick_name").text(nickName);
    }

    // 点击退出
    $(".my_logout_button").on("click",".my_logout",function(){
        // console.log("111")
        if(confirm("您要退出当前的账号吗")){
             // 删除缓存的用户信息
            removeCookie("nickName");
            $(".my_button").show();// 显示登录按钮
            $(".my_logout_button").hide();// 隐藏退出按钮和用户昵称
        }
    })
})


// - 请求地址: /login
// - 请求方式: POST
// - 提交的参数:
//   参数名称      值类型                 说明
//   account       string              表示账号
//   password      string | number     表示密码
// - 响应数据格式: json格式
// - 请求示例: http://127.0.0.1:7000/login